/*
 * @Description:
 * @Author: liyuhao
 * @Date: 2021-06-25 14:23:51
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-05-27 15:59:02
 */
import React from 'react'
import { Spin, Empty, Pagination } from 'antd'
import { ReportCardProps } from '../ReportCard'
import './index.less'
import CardRow from '../CardRow'

export interface CardListProps {
  style?: React.CSSProperties
  dataSource?: ReportCardProps[]
  pagination?: any
  loading?: boolean
  handleRefresh?: any

}

const CardList: React.FC<CardListProps> = props => {
  const { style, dataSource, pagination, loading, handleRefresh } = props
  // 两行 一行5个
  const firstRow = dataSource?.slice(0, 5)
  const secondRow = dataSource?.slice(5, 10)

  return (
    <div style={style}>
      <p className={'card-list-title'}>
        <span className='report-total'>共计</span>
        <span className='report-total-count'>
          {pagination?.total}
        </span>
        <span className='report-total'>个报告</span>
      </p>
      <div className='card-list'>
        <Spin spinning={loading}>
          {dataSource && dataSource.length > 0 ? (
            <>
              {firstRow && <CardRow data={firstRow} handleRefresh={handleRefresh} count={5} />}
              {secondRow && <CardRow data={secondRow} handleRefresh={handleRefresh} count={5} />}
            </>
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )}
        </Spin>
        <Pagination
          {...pagination}
          style={{ textAlign: 'center', marginTop: 60 }}
          showSizeChanger={false}
          showTotal={undefined}
        />
      </div>
    </div>
  )
}

export default CardList
